import React, { PureComponent } from 'react'
const ThemeContext = React.createContext() // 创建上下文对象
// 两种Context传值
//   class.contextType
//   Consumer 传值
class MyButton extends PureComponent {
  render () {
    return (
      <>
        <button>按钮</button> 
        <ThemeContext.Consumer>
          {
            (value) => { // value即为祖先组件传递给后代组件的值
              return <p>{ value }</p>
            }
          }
        </ThemeContext.Consumer>
      </>
    )
  }
}

class ToolBar extends PureComponent {
  render () {
    return (
      <MyButton></MyButton>
    )
  }
}

export default class App extends PureComponent {
  state = { theme: 'dark'}
  render() {
    return (
      // Context.Provider 传递数据只能使用 value 属性
      <ThemeContext.Provider value={ this.state.theme }>
        <ToolBar/>
      </ThemeContext.Provider>
    )
  }
}

